<template>
  <div class="letter">
    <ul>
      <li
        v-for="(val, key) of cities"
        :key="key"
        @click="hanldLetterClick"
      >{{ key }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  methods: {
    hanldLetterClick (e) {
      this.$emit('change', e.target.innerHTML)
    }
  }
}
</script>

<style lang="stylus" scoped>
.letter
  position: absolute
  right: 0
  top: 43px
  bottom: 0
  width: 26px
  display: flex
  flex-direction: column
  justify-content: center
  ul
    list-style: none
    li
      text-align: center
      padding: 1px 0
      color: #00bcd4
      font-size: 12px
</style>
